<template>
  <div class="permission-container">
    <div class="pc-btn">
      <el-button type="primary" size="mini">添加权限</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"
        border
        :row-class-name="tableRowClassName"
      >
        <el-table-column
          prop="name"
          label="名称"
        />
        <el-table-column
          prop="code"
          label="标识"
        />
        <el-table-column
          prop="description"
          label="描述"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="150"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small">添加</el-button>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getPermissionListRequest } from '@/api/permission'
import { transformListToTree } from '@/utils'

export default {
  name: 'Permission',
  data() {
    return {
      tableData: []
    }
  },
  // 发请求是在created还是mounted里面发？
  created() {
    this.getPermissionList()
  },
  mounted() {
    // 初始化请求一般放在cerated，用慢网测试看效果不明显
    // creatd dom还没有准备好，初始数据，和修改数据不影响页面，
    // 在mounted里面，dom已经渲染好了一遍，等接口返回了，（如果dom刚刚准备好，请求就返回了，那这里就会闪以下屏幕）
    // this.getPermissionList()
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      // rowIndex % 2 1 0   0表示假 false
      // rowIndex % 2 === 1
      if (rowIndex % 2) {
        // 奇数行
        return 'warning-row'
      } else {
        return 'success-row'
      }
      // return ''
    },
    async getPermissionList() {
      const res = await getPermissionListRequest()
      console.log(res)
      this.tableData = transformListToTree(res.data, 0)
    }
  }
}
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<style lang="scss" scoped>
.permission-container {
  margin: 20px;
  .pc-btn {
    margin-bottom: 20px;
  }
}
</style>
